<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div>
      <div id="app1"></div>
      <div id="app2"></div>
      <div id="app3"></div>
    </div>
    <script src="../utils/js/old_version/react.development.js"></script>
    <script src="../utils/js/old_version/react-dom.development.js"></script>
    <script src="../utils/js/old_version/prop-types.js"></script>
    <script src="../utils/js/old_version/babel.min.js"></script>
    <script type="text/babel">
      function Person(props) {
        let { name, age, sex } = props;
        return (
          <ul>
            <li> name: {name}</li>
            <li> age: {age + 1}</li>
            <li> sex: {sex}</li>
          </ul>
        );
      }

      Person.propTypes = {
        age: PropTypes.number.isRequired,
      };

      Person.defaultProps = {
        sex: "男",
      };

      ReactDOM.render(
        <Person name="xx" age={20} />,
        document.getElementById("app2")
      );
    </script>
  </body>
</html>
